<template>
  <div
    class="rela"
    style="margin: 40px; border: 1px solid #eeeeee; width: 375px; height: 680px"
  >
    <!-- 标题 -->
    <div
      class="rela flexcen"
      style="text-align: center; height: 40px; line-height: 40px"
    >
      <img
        v-if="showBack"
        class="shou abso"
        style="width: 20px; height: 20px; top: 10px; left: 5px"
        src="@/assets/images/back.png"
        alt=""
        @click="back"
      />
      <div style="max-width: 180px" class="overtxt">
        {{ taskName }}
      </div>
    </div>
    <!-- 内容 -->
    <div class="contain paper">
      <!-- 顶部题目进度栏 -->
      <div class="topLine flexcolcenter flexbet">
        <div style="width: 160rpx">
          <img
            @click.stop="menu = !menu"
            v-if="menu"
            src="@/assets/images/mini/exam/expand_menu.png"
            class="topicListIcon"
          />
          <img
            @click.stop="menu = !menu"
            v-else
            src="@/assets/images/mini/exam/menu.png"
            class="topicListIcon"
          />
        </div>

        <div class="topic flexcolcenter">
          <div class="topicFraction">
            {{ curIndex + 1 }}/{{ topicList.length }}
          </div>
          <div class="topicProgress">
            <el-progress
              color="#ff9a00"
              :show-text="false"
              :percentage="parseInt(((curIndex + 1) / topicList.length) * 100)"
            ></el-progress>
          </div>
        </div>
        <div class="cutdown flexcen flexcolcenter" v-if="type !== 'homework'">
          <img
            class="cutdown_icon"
            src="@/assets/images/mini/exam/clock.png"
            alt=""
          />
          <div>{{ time }}</div>
        </div>
        <div style="width: 160rpx" v-else></div>
      </div>
      <!-- 题目swiper -->
      <el-carousel
        @change="carouselChange"
        ref="carousel"
        :initial-index="curIndex"
        :autoplay="false"
        indicator-position="none"
        :style="{
          height: `calc(650px - 43px - 60px)`,
        }"
        class="topicSwiper"
      >
        <el-carousel-item
          class="topicswiperItem"
          v-for="(item, index) in topicList"
          :key="index"
        >
          <!-- 题目 -->
          <div class="topicItem">
            <!-- 大题文本 -->
            <div class="topicItem_title rela">
              {{ item.title }}
            </div>
            <!-- 题目文本 -->
            <div class="topicItem_name rela">
              <div class="topicItem_type abso">
                {{ topicType[item.topicType].type }}
              </div>
              <div class="topicItem_name_txt">
                {{ item.itemIndex }}.{{ item.topicContent
                }}{{ item.content }}({{ item.score }}分)
              </div>
            </div>
            <!-- 题目图片 -->
            <div
              class="flex"
              style="margin: 20rpx 0 80rpx 0"
              v-if="item.topicPic && item.topicPic.length > 0"
            >
              <img
                @click="preview(item1)"
                style="width: 50px; margin: 0 5px 5px 0"
                mode="widthFix"
                class="shou"
                v-for="(item1, index1) in item.topicPic"
                :key="index1"
                :src="item1"
              />
            </div>
            <!-- 选项用于非简答 非实操 topicItem_option_error-->
            <div
              v-if="item.topicType < 4"
              :class="[
                'topicItem_option',
                'flex',
                item2.error
                  ? 'topicItem_option_error'
                  : item2.selected
                  ? 'topicItem_option_select'
                  : '',
              ]"
              @click="
                status == 'inProgress' ? optionClick(item2, index2, index) : ''
              "
              v-for="(item2, index2) in item.topicOptionList"
              :key="index2"
            >
              <!--0 1 2如果是单选 多选题 判断题-->
              <div
                class="topicItem_option_letter"
                v-if="item.topicType == 0 || item.topicType == 1"
              >
                {{ letter[index2] }}
              </div>
              <div
                class="topicItem_option_txt"
                v-if="
                  item.topicType == 0 ||
                  item.topicType == 1 ||
                  item.topicType == 2
                "
              >
                {{ item2.optionValue }}
              </div>
              <!-- 3 如果是填空题 -->
              <div class="topicItem_option_letter" v-if="item.topicType == 3">
                {{ index2 + 1 }}.
              </div>
              <div class="topicItem_option_txt" v-if="item.topicType == 3">
                <input
                  :disabled="true"
                  type="text"
                  v-model="item2.optionValue"
                  placeholder="请输入答案"
                />
              </div>
            </div>
            <!-- 实操 简答题 -->
            <div
              class="shortAnswerBox"
              v-if="item.topicType == 4 || item.topicType == 5"
            >
              <div class="tip">
                <!-- 文字 -->
                <div class="tiptxt">请输入答案</div>
                <div>
                  <img
                    class="uploadIcon"
                    src="@/assets/images/upload.png"
                    alt=""
                    srcset=""
                  />
                </div>

                <span>*</span>照片大小不可超过10MB、视频大小不可超过500MB
              </div>
            </div>
          </div>

          <!-- 答案解析 批改的时候 和 查看考试结果的时候-->
          <div class="topicItem_resolve">
            <div
              class="topicItem_resolve_true flex"
              v-if="
                !(
                  $store.getters.roles.length == 2 &&
                  $store.getters.roles.includes('sa')
                )
              "
            >
              <div class="topicItem_resolve_true_lable">正确答案</div>
              <div class="topicItem_resolve_true_value">
                {{ item.trueAnswer ? item.trueAnswer : "" }}
              </div>
            </div>
            <div class="topicItem_resolve_true flex">
              <div class="topicItem_resolve_true_lable">试题解析</div>
            </div>
            <div class="topicItem_resolve_txt">
              {{ item.resolve ? item.resolve : "暂无试题解析" }}
            </div>
            <!-- 答案解析图片 -->
            <div
              class="flex"
              style="margin: 10px 0 0px 0"
              v-if="item.resolvePic && item.resolvePic.length > 0"
            >
              <el-image
                :preview-src-list="item.resolvePic"
                style="width: 50px; margin: 0 5px 5px 0"
                mode="widthFix"
                v-for="(item1, index1) in item.resolvePic"
                :key="index1"
                :src="item1"
              >
              </el-image>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
      <!-- 底部按钮 -->
      <div :class="['bottomLine', curIndex == 0 ? 'flexend' : 'flexbet']">
        <div class="pre shou" v-if="curIndex > 0" @click="goPrev">上一题</div>
        <div
          class="next shou"
          v-if="curIndex < topicList.length - 1"
          @click="goNext"
        >
          下一题
        </div>
        <div class="next shou" v-if="curIndex == topicList.length - 1">
          提 交
        </div>
      </div>
      <!-- 题号卡 -->
      <div class="topicNoCard" v-show="menu" @click="menu = false">
        <div @click.stop="" class="NoContain">
          <!-- 题号盒子 -->
          <div class="NoBox">
            <div
              v-for="(item, index) in examPaperTitleList"
              :key="index"
              v-if="item.topicList.length > 0"
            >
              <div class="NoBox_title">
                <span>{{ item.title }}</span
                >共{{ item.topicList.length }}题
              </div>
              <div class="NoBox_topic flex">
                <div v-for="(item2, index2) in item.topicList" :key="index2">
                  <!-- 做题中的时候 -->
                  <div
                    @click.stop="goToIndex(item2.index)"
                    :class="[
                      'shou',
                      'topicNo',
                      item2.haveAnswer
                        ? 'topicNoAnswer'
                        : item2.id == topicList[curIndex].id
                        ? 'topicNoCur'
                        : '',
                    ]"
                  >
                    {{ index2 + 1 }}
                  </div>
                  <!-- 查看试卷结果的时候-->
                  <div
                    @click.stop="topicNoClick(item2.topicId)"
                    v-if="status == 'result'"
                    :class="[
                      'topicNo',
                      item2.scoreGot == item2.score
                        ? 'topicNoAnswer'
                        : 'topicNoError',
                    ]"
                  >
                    {{ index2 + 1 }}
                  </div>
                  <!-- 批改的时候 -->
                  <div
                    @click.stop="topicNoClick(item2.topicId)"
                    v-if="status == 'correct' || status == 'preview'"
                    :class="[
                      'topicNo',
                      item2.correctScore
                        ? 'topicNoAnswer'
                        : item2.topicId == topicList[curIndex].topicId
                        ? 'topicNoCur'
                        : '',
                    ]"
                  >
                    {{ index2 + 1 }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
    
<script>
import { previewExamPaper } from "@/api/exam/paper";
export default {
  props: {
    examId: [Number, String],
    taskName: [Number, String],
    type: String,
    showBack: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      topicList: [],
      examPaperTitleList: [],
      curIndex: 0,
      menu: false,
      status: "inProgress",
      topicType: [
        {
          type: "单选题",
          list: [],
        },
        {
          type: "多选题",
          list: [],
        },
        {
          type: "判断题",
          list: [],
        },
        {
          type: "填空题",
          list: [],
        },
        {
          type: "简答题",
          list: [],
        },
        {
          type: "操作题",
          list: [],
        },
      ],
      time: "",
      letter: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "G", "K"],
    };
  },
  watch: {
    // examId(e) {
    //   this.getPaper();
    // },
  },
  mounted() {},
  methods: {
    back() {
      this.$emit("paperingBack");
    },
    goToIndex(index) {
      this.$refs.carousel.setActiveItem(index);
      this.menu = false;
    },
    goPrev() {
      this.$refs.carousel.prev();
    },
    goNext() {
      this.$refs.carousel.next();
    },
    preview(e) {
      window.open(e, "_blank");
    },
    carouselChange(e) {
      this.curIndex = e;
    },
    async getPaper(examId) {
      this.menu = false;
      let res = await previewExamPaper(examId);
      this.time = "00:00";
      this.topicList = [];
      this.examPaperTitleList = res.data.examPaperTitleList;
      let curIndex = 0;
      console.log(res.data.examPaperTitleList);
      res.data.examPaperTitleList.map((item) => {
        console.log(item.topicList);
        if (item.topicList && item.topicList.length > 0) {
          item.topicList.map((topic, topicIndex) => {
            console.log(topic, topicIndex);
            topic.itemIndex = topicIndex + 1;
            topic.index = curIndex;
            curIndex++;
            topic.title = item.title;
            if (topic.topicPic && topic.topicPic.length > 0) {
              topic.topicPic = topic.topicPic.split(",");
            }
            if (topic.resolvePic && topic.resolvePic.length > 0) {
              topic.resolvePic = topic.resolvePic.split(",");
            }
            // 如果是单选题
            if (topic.topicType == 0) {
              if (topic.topicAnswer) {
                topic.topicOptionList.map((item) => {
                  if (topic.topicAnswer.answer == item.label) {
                    item.selected = true;
                    // !!!用于检查是否错误
                    if (this.status == "result") {
                      item.error =
                        item.label == topic.trueAnswer ? false : true;
                    }
                  }
                });
                topic.haveAnswer = true;
              } else {
                topic.haveAnswer = false;
              }
            }
            // 如果是多选题
            if (topic.topicType == 1) {
              if (topic.topicAnswer) {
                topic.topicOptionList.map((item) => {
                  if (topic.topicAnswer.multiAnswers) {
                    if (topic.topicAnswer.multiAnswers.includes(item.label)) {
                      item.selected = true;
                      // !!!用于检查是否错误
                      if (this.status == "result") {
                        item.error =
                          topic.trueAnswer.indexOf(item.label) !== -1
                            ? false
                            : true;
                      }
                    }
                  } else {
                    if (topic.topicAnswer.answer == item.label) {
                      item.selected = true;
                      // !!!用于检查是否错误
                      if (this.status == "result") {
                        item.error =
                          topic.trueAnswer.indexOf(item.label) !== -1
                            ? false
                            : true;
                      }
                    }
                  }
                });
                topic.haveAnswer = true;
              } else {
                topic.haveAnswer = false;
              }
            }
            // 如果是判断题
            if (topic.topicType == 2) {
              // （用于初始化）
              topic.topicOptionList = [
                {
                  optionValue: "正确",
                },
                {
                  optionValue: "错误",
                },
              ];
              // (用于进行中答案的显示)
              if (topic.topicAnswer && topic.topicAnswer.answer == "错误") {
                topic.topicOptionList[1].selected = true;
                topic.haveAnswer = true;
                // !!!用于检查是否错误
                if (this.status == "result") {
                  topic.topicOptionList[1].error =
                    topic.topicAnswer.answer == topic.trueAnswer ? false : true;
                }
              } else if (
                topic.topicAnswer &&
                topic.topicAnswer.answer == "正确"
              ) {
                topic.topicOptionList[0].selected = true;
                topic.haveAnswer = true;
                // !!!用于检查是否错误
                if (this.status == "result") {
                  topic.topicOptionList[0].error =
                    topic.topicAnswer.answer == topic.trueAnswer ? false : true;
                }
              } else {
                topic.haveAnswer = false;
              }
            }
            // 如果是填空题
            if (topic.topicType == 3) {
              // （用于初始化）
              topic.topicOptionList = [];
              for (let i = 0; i < topic.optionCount; i++) {
                topic.topicOptionList.push({
                  optionValue: "",
                });
              }
              // (进行中用于答案赋值)
              if (topic.topicAnswer) {
                topic.topicOptionList.map((option, optionIndex) => {
                  option.optionValue =
                    topic.topicAnswer.multiAnswers[optionIndex];
                  if (option.optionValue) {
                    option.selected = true;
                  }
                  // !!!用于答案判断
                  if (this.status == "result") {
                    option.error =
                      (optionIndex + 1 + ". " + option.optionValue).trim() ==
                      (topic.trueAnswer &&
                        topic.trueAnswer.split(";")[optionIndex].trim())
                        ? false
                        : true;
                  }
                });
                // 判断数量是否全部回答完
                if (
                  topic.topicAnswer.multiAnswers.length == topic.optionCount
                ) {
                  topic.haveAnswer = true;
                }
              }
            }
            // 如果是简答题
            if (topic.topicType == 4 || topic.topicType == 5) {
              topic.fileInfo =
                topic.topicAnswer && topic.topicAnswer.fileInfo
                  ? JSON.parse(topic.topicAnswer.fileInfo).map((item) => {
                      return {
                        url: item.url,
                      };
                    })
                  : [];
              if (
                (topic.topicAnswer && topic.topicAnswer.answer) ||
                topic.fileInfo.length > 0
              ) {
                topic.haveAnswer = true;
              }
            }
          });
          this.topicList = [...this.topicList, ...item.topicList];
        }
      });
      console.log("试题", this.topicList);
      this.$refs.carousel.setActiveItem(0);
    },
  },
};
</script>
<style scoped lang="scss">
.topicNoCard {
  position: absolute;
  z-index: 10;
  top: 65px;
  left: 0;
  width: 373px;
  height: 613px;
  background: rgba($color: #000000, $alpha: 0.2);
}
.paper {
  ::v-deep .el-carousel__arrow--left {
    display: none !important;
  }
  ::v-deep .el-carousel__arrow--right {
    display: none !important;
  }
}
@mixin btn_plain($bg_color, $color) {
  background: $bg_color;
  color: $color;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
  font-size: 28px;
  &:active {
    background: darken($bg_color, 10%);
    color: darken($color, 18%);
  }
  &:disabled {
    background: lighten($bg_color, 10%);
    color: lighten($color, 40%);
  }
  @content;
}
.content {
  overflow: hidden;
  box-sizing: border-box;
  overflow-x: hidden;
  height: 650px;
  overflow-y: scroll;
}
.shortAnswerBox {
  border-radius: 8px;
  box-sizing: border-box;
  border: 1px solid #f5f6f7;

  .tip {
    margin-top: 7px;
    .tiptxt {
      font-size: 12px;
      margin-bottom: 20px;
    }
    span {
      color: #e95756;
    }

    font-size: 10px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }

  padding: 15px;
}
.uploadIcon {
  margin: 0px 0px 10px 0px;
  width: 70px;
  height: 70px;
}
.NoContain {
  width: 373px;
  height: 400px;
  background: white;

  .NoBox {
    box-sizing: border-box;
    padding: 0 16px 32px 16px;
    // overflow: auto;
    overflow-y: scroll;
    height: 328px;

    .NoBox_title {
      margin-top: 24px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;

      span {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        margin-right: 12px;
      }
    }

    .NoBox_topic {
      .topicNo {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        border-radius: 18px;
        margin: 12px 16px 0 0;
        width: 36px;
        height: 36px;
        box-sizing: border-box;
        line-height: 36px;
        text-align: center;
        background: #ffffff;
        border: 1px solid #dddddd;
      }

      .topicNoAnswer {
        color: #2cacff !important;
        background: #daf1ff !important;
        border: 1px solid #daf1ff !important;
      }

      .topicNoCur {
        border: 1px solid #ff4d03 !important;
      }

      .topicNoError {
        color: #e95756 !important;
        background: #ffcfce !important;
        border: 1px solid #ffcfce !important;
      }
    }
  }

  .confirmbox {
    box-sizing: border-box;
    height: 72px;

    .confirmBtn {
      @include btn_plain(#ff4d03, #ff9a00) {
        width: 342px;
        height: 44px;
        border-radius: 22px;
        color: white;
        border-radius: 22px;
        font-size: 14px;
      }
    }
  }
}

.cutdown {
  padding: 0 9px;
  border-radius: 12px;
  height: 25px;
  background: #fef4e9;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ef7d00;
  .cutdown_icon {
    width: 19px;
    height: 19px;
    margin-right: 5px;
  }
}

::v-deep input {
  line-height: 20px;
  height: 20px !important;
  min-height: 20px !important;
  font-size: 14px !important;
  font-family: PingFangSC-Medium, PingFang SC !important;
  font-weight: 500 !important;
}

.bottomLine {
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 5px;
  border-top: 1px solid #eeeeee;
  height: 50px;

  .pre {
    border: 1px solid #e5e5e5;

    @include btn_plain(#ffffff, #333333) {
      width: 120px;
      height: 40px;
      border-radius: 20px;
      color: #333333;
      border-radius: 22px;
      font-size: 14px;
    }
  }

  .next {
    @include btn_plain(#ff4d03, #ff9a00) {
      width: 120px;
      height: 40px;
      border-radius: 20px;
      color: white;
      border-radius: 22px;
      font-size: 14px;
    }
  }
}

/* 顶部题目进度栏 */
.topLine {
  height: 40px;
  padding: 0 16px 0 16px;

  .topicListIcon {
    width: 20px;
    height: 20px;
  }

  .topic {
    .topicFraction {
      height: 20px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      margin-right: 8px;
    }

    .topicProgress {
      width: 72px;
    }
  }
}
.topicItem_resolve_true {
  margin-top: 17px;

  .topicItem_resolve_true_lable {
    margin-right: 12px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 20px;
  }

  .topicItem_resolve_true_value {
    width: 275px;
    margin-right: 2px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff4d03;
    line-height: 20px;
  }
}

.topicItem_resolve {
  padding: 0 10px;
  margin-top: 0px;

  .topicItem_resolve_txt {
    margin-top: 8px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 20px;
  }
}
// swiper
.topicSwiper {
  box-sizing: border-box;

  .topicswiperItem {
    height: calc(650px - 43px - 60px);
    overflow: auto;
  }

  .topicItem {
    padding: 12px 17px 39px 12px;
    .topicItem_title {
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 500;
    }
    .topicItem_name {
      margin-bottom: 15px;
      .topicItem_name_txt {
        text-indent: 2em;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 22px;
        white-space: pre-wrap;
      }

      .topicItem_type {
        overflow: hidden;
        top: 4px;
        text-align: center;
        font-size: 10px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 14px;
        width: 26px;
        height: 14px;
        background: #4e8dff;
        border-radius: 4px 4px 4px 0rpx;
      }
    }

    .topicItem_option_error {
      background: #feeaea !important;
      color: #e95756 !important;
    }

    .topicItem_option_select {
      color: #2cacff !important;
      background: #daf1ff !important;
    }

    .topicItem_option {
      margin-bottom: 16px;
      padding: 12px 16px;
      box-sizing: border-box;
      width: 343px;
      border-radius: 4px;
      color: #333333;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      line-height: 20px;

      .topicItem_option_letter {
        height: 20px;
        line-height: 20px;
        margin-right: 16px;
      }

      .topicItem_option_txt {
        line-height: 20px;
        width: 282px;
      }
    }

    .topicItem_resolve {
      margin-top: 54px;

      .topicItem_resolve_title {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 22px;
      }
      .topicItem_resolve_true_teacherRemark {
        ::v-deep .van-cell {
          padding: 0 !important;
        }
        ::v-deep .van-field__body--textarea {
          padding: 0 !important;
        }
      }
      .topicItem_resolve_true {
        margin-top: 17px;
        ::v-deep .van-cell {
          padding-left: 0 !important;
        }
        .topicItem_resolve_true_lable {
          margin-right: 12px;
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          line-height: 20px;
        }

        .topicItem_resolve_true_value {
          width: 275px;
          margin-right: 2px;
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ff4d03;
          line-height: 20px;
        }
      }

      .topicItem_resolve_txt {
        margin-top: 8px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 20px;
      }
    }
  }
}
</style>